<template>
    <el-dialog :visible.sync="show" title="经营范围设置配送费模板" center :before-close="cancel" width="fit-content">
        <el-row class="content">
            <div v-for="item in list">
                <h3>{{ item.title }}</h3>
                <el-table :data="item.list" style="width:fit-content">
                    <el-table-column prop="businessVillageName" label="经营范围" align="center" width="300">

                    </el-table-column>
                    <el-table-column label="配送费模板" align="center" width="400">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.modelId" clearable filterable>
                                <el-option v-for="item2 in modelList" :value="item2.id" :label="item2.name"
                                    :key="item2.id">

                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-row>
        <div slot="footer">
            <el-button type="primary" @click="confirm">
                确定
            </el-button>
            <el-button @click="cancel">
                取消
            </el-button>
        </div>

    </el-dialog>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: true
        },
        list: {
            type: Array,
            default: () => []
        },
        modelList: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {

        }
    },
    model: {
        event: 'showDialog',
        prop: 'show',
    },
    methods: {
        cancel() {
            this.$emit("showDialog", false)
        },
        confirm() {
            this.$confirm("确定保存？","提示",{}).then(()=>{
                this.$emit("confirm")
            })
            
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    max-height: 700px;
    overflow: auto;

}
</style>